<template>
  <div class="app-container">
    <div>
      <el-table :data="tableData" border row-key="id" lazy
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="width: 100%">
        <el-table-column label="序号" type="index" width="100"></el-table-column>
        <el-table-column label="动火方案" prop="name"></el-table-column>
        <el-table-column label="动火申请单位" prop="hotApplyUnit"></el-table-column>
        <el-table-column label="动火作业时间" width="200">
          <template slot-scope="scope">
            {{ scope.row.hotWorkStartTime | dateFormat('YYYY-MM-DD') }} 至
            {{ scope.row.hotWorkEndTime | dateFormat('YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column label="基层战长负责人" prop="workAdminUserName">
        </el-table-column>

        <el-table-column label="动火作业级别" prop="hotLevel"></el-table-column>
        <el-table-column label="动火作业地点" prop="hotPlace"></el-table-column>
        <el-table-column label="动火作业单位负责人" prop="hotWorkUnitAdmin"></el-table-column>
        <el-table-column label="动火作业单位监护人" prop="hotWorkUnitGuardian"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.confirmStatus == 0? "未审批":"已审批"}}
          </template>
        </el-table-column>

        <el-table-column :label="$t('table.actions')" align="center" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="info" round @click="viewHandle( scope.row.id)">{{ $t("table.see") }}
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>


    <el-dialog title="查看" :visible.sync="viewDialog" width="40%" :close-on-click-modal="false" close-on-press-escape
      destroy-on-close>
      <el-form ref="ruleForm" :model="obj" label-width="190px">
        <el-form-item label="动火方案:" label-width="190px" prop="name">
          {{ obj.name }}
        </el-form-item>
        <el-form-item label-width="190px">
          <h4 @click="downLoadfile(obj.fileUrl)"><i class="el-icon-document"></i> 查看动火方案附件</h4>
        </el-form-item>
        <el-form-item label="动火申请单位:" label-width="190px" prop="hotApplyUnit">
          {{ obj.hotApplyUnit }}
        </el-form-item>
        <el-form-item label="动火作业时间:" label-width="190px" prop="hotApplyUnit">
          {{ obj.hotWorkStartTime | dateFormat('YYYY-MM-DD') }} 至 {{ obj.hotWorkEndTime | dateFormat('YYYY-MM-DD') }}
        </el-form-item>
        <el-form-item label="基层战场(作业区)负责人:" label-width="190px" prop="workAdminUserName">
          {{ obj.workAdminUserName }}
        </el-form-item>
        <el-form-item label="动火作业级别:" label-width="190px" prop="hotLevel">
          {{ obj.hotLevel }}
        </el-form-item>
        <el-form-item label="动火作业地点:" label-width="190px" prop="hotPlace">
          {{ obj.hotPlace }}
        </el-form-item>
        <el-form-item label="动火作业单位负责人:" label-width="190px" prop="hotWorkUnitAdmin">
          {{ obj.hotWorkUnitAdmin }}
        </el-form-item>
        <el-form-item label="动火作业单位监护人:" label-width="190px" prop="hotWorkUnitAdminUsername">
          {{ obj.hotWorkUnitAdminUsername }}
        </el-form-item>
        <el-form-item label="动火作业内容及目的:" label-width="190px" prop="hotContent">
          {{ obj.hotContent }}
        </el-form-item>
        <el-form-item label="动火作业部位与周围油气流程及置换隔断示意图:" label-width="190px" prop="hotApplyUnit">
          <el-image v-if="obj.sketchMap" :src="item|imgPath" alt="" v-for="(item,index) in imgUrl"
            :preview-src-list="getSrcList(obj.sketchMap)">
            <div slot="error" class="image-slot">暂无图片</div>
          </el-image>
        </el-form-item>
        <el-form-item label='动火作业安全技术措施及现场施工组织:' label-width="300px">

        </el-form-item>
        <div style="padding-left: 200px;">
          <span class="isShowLiucheng" @click="toggleShow">{{ isShowLiucheng }}</span>
          <el-steps v-show="toggleConShow" direction="vertical"
            :active="obj.confirmStatus === 0 ? obj.nextGroup-1:obj.nextGroup">
            <el-step v-for="(item,index) in stepList">
              <template #description>
                <h3 v-if="index==1">动火作业单位</h3>
                <p v-if="index==1" v-for="(i, s) in item" :class="i.approvalStatus == 0?'a':'b'">
                  <span>{{i.userInfo.username}} </span>
                </p>
                <h3 v-if="index==2">作业区域所在基层单位</h3>
                <p v-if="index==2" v-for="(i, s) in item" :class="i.approvalStatus == 0?'a':'b'">
                  <span>{{i.userInfo.username}} </span>
                </p>
                <h3 v-if="index==3">二级单位业务主管部门</h3>
                <el-radio-group v-model="radio1" v-for="(i, s) in item" v-if="index==3"
                  :class="i.approvalStatus == 0?'a':'b'">
                  <el-radio
                    :disabled="(obj.nextGroup-1 === 2&&i.approvalStatus==0&& i.approvalUserId == userId) ?false:true"
                    label=1 v-if="s==0">
                    生产调度运行部门:{{i.userInfo.username}}
                  </el-radio>
                  <el-radio
                    :disabled="(obj.nextGroup-1 === 2&&i.approvalStatus==0&& i.approvalUserId == userId) ?false:true"
                    label=2 v-if="s==1">
                    资产设施管理部门:{{i.userInfo.username}}
                  </el-radio>
                  <el-radio
                    :disabled="(obj.nextGroup-1 === 2&&i.approvalStatus==0&& i.approvalUserId == userId) ?false:true"
                    label=3 v-if="s==2">
                    安全监管部门:{{i.userInfo.username}}
                  </el-radio>
                </el-radio-group>
                <h3 v-if="index==4">二级单位主管领导</h3>
                <p v-if="index==4" v-for="(i, s) in item" :class="i.approvalStatus == 0?'a':'b'">
                  <span>{{i.userInfo.username}} </span>
                </p>
                <h3 v-if="index==5">公司部门业务主管</h3>
                <el-radio-group v-model="radio" v-for="(i, s) in item" v-if="index==5"
                  :class="i.approvalStatus == 0?'a':'b'">
                  <el-radio
                    :disabled="(obj.nextGroup-1 === 4&&i.approvalStatus==0&& i.approvalUserId == userId) ?false:true"
                    label=1 v-if="s==0">
                    生产调度运行部门:{{i.userInfo.username}}
                  </el-radio>
                  <el-radio
                    :disabled="(obj.nextGroup-1 === 4 &&i.approvalStatus==0&& i.approvalUserId == userId) ?false:true"
                    label=2 v-if="s==1">
                    资产设施管理部门:{{i.userInfo.username}}
                  </el-radio>
                  <el-radio
                    :disabled="(obj.nextGroup-1 === 4&&i.approvalStatus==0&& i.approvalUserId == userId) ?false:true"
                    label=3 v-if="s==2">
                    安全监管部门:{{i.userInfo.username}}
                  </el-radio>
                </el-radio-group>
                <h3 v-if="index==6">资产设施管理部门负责人</h3>
                <p v-if="index==6" v-for="(i, s) in item" :class="i.approvalStatus == 0?'a':'b'">
                  <span>{{i.userInfo.username}} </span>
                </p>
              </template>
            </el-step>
          </el-steps>
        </div>
        <el-form-item v-if="isShowBtn && obj.confirmStatus != 1" label="审批意见:" label-width="190px" prop="">
          <el-input type="textarea" v-model="mark"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="viewDialog = false">取 消</el-button>
        <el-button v-if="isShowBtn && obj.confirmStatus != 1" type="primary" @click="confromBtn">确 认</el-button>
        <el-button v-if="!isShowBtn" type="primary" @click="viewDialog = false">关 闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import WiseCrud from '../../../../components/Crud/wiseCrud'
  import {
    postHandle
  } from '../../../../api'
  import {
    imgPath
  } from '@/filters'

  import {
    formatTime,
    parseTime
  } from '@/utils'
  export default {
    name: 'UserManage',
    components: {
      WiseCrud
    },
    data() {
      return {
        handle: [],
        urls: {
          list: '/api/v1/welder-sbtx-second/hot-program-comb/list',
          show: '/api/v1/welder-sbtx-second/hot-program-comb/show/',
          confirmList: '/api/v1/welder-sbtx-second/approval-process-comb/process-confirm-list',
          confirmPost: '/api/v1/welder-sbtx-second/hot-program-comb/process-confirm/'
        },
        stepList:{},
        viewDialog: false,
        obj: {},
        imgUrl: [],
        mark: '',
        tableData: [],
        isShowBtn: false,
        id: '',
        radio1: null,
        radio: null,
        objId: '',
        toggleConShow: true,
        isShowLiucheng: '收起流程进度',
      }
    },
    created() {
      this.getList()
    },
    computed: {
      userId() {
        return this.$store.state.user.userId
      }
    },
    methods: {
      // 查看
      viewHandle(dataId) {
        this.id = dataId
        this.getSetpList(dataId)
        this.viewDialog = true
        this.isShowBtn = false
        this.mark = ''
      },
      getList() {
        let params = {
          d: {
            filters: [{
                field: "entSpaceId",
                operator: "EQUALS",
                value: this.$store.getters.entSpaceId
              },
              {
                field: "confirmUserIds",
                operator: "like",
                value: this.userId
              }
            ],
            page: {
              p: 1,
              ps: 99999,
            },
            retPage: true,
          },
        };
        postHandle(this.urls.list, params).then((res) => {
          this.tableData = res.result
          // resolve(data)
        });
      },
      toggleShow() {
        if (this.isShowLiucheng == '收起流程进度') {
          this.isShowLiucheng = '查看流程进度'
          this.toggleConShow = false
        } else if (this.isShowLiucheng == '查看流程进度') {
          this.isShowLiucheng = '收起流程进度'
          this.toggleConShow = true
        }
      },
      // 详情
      getObjectId(dataId,stepList1) {
        this.id = dataId
        postHandle(this.urls.show + dataId).then(res => {
          
          this.isShowBtn = false
          this.mark = ''
          this.imgUrl = []
          this.obj = res.result
          this.stepList=stepList1;
          let userId = this.userId
          let nextGroup = res.result.nextGroup
          let nextLevel = res.result.nextLevel
          let otempObj =  stepList1[res.result.nextGroup]
        
          // for (let a in otempObj) {
          //   if (nextLevel == otempObj[a].level) {
          //     if (userId == otempObj[a].approvalUserId) {
          //       this.isShowBtn = true
          //     }
          //   }
          // }

          for (let a in otempObj) {
            if (userId === otempObj[a].approvalUserId && otempObj[a].approvalStatus === 0) {
              this.isShowBtn = true
              this.radio1 = (Number(a) + 1).toString()
              this.radio = (Number(a) + 1).toString()
              this.objId = otempObj[a].id
            }
          }

          if (res.result.sketchMap) {
            let a = res.result.sketchMap.match(/(\;)/)
            if (a != null) {
              this.imgUrl = res.result.sketchMap.split(';')
            } else {
              this.imgUrl.push(res.result.sketchMap)
            }
          }
        })

      },
      //步骤
      getSetpList(dataId) {
        let params = {
          d: {
            filters: [{
              "field": "dataId",
              "operator": "EQUALS",
              "value": dataId
            }]
          }
        }
        postHandle(this.urls.confirmList, params).then(res => {
         
          this.stepList = res.result
       
          this.getObjectId(dataId, res.result)
        })
      },
      downLoadfile(obj) {
        if (obj != undefined) {
          window.open(imgPath(obj))
        } else {
          this.$message('暂无附件');
        }
      },
      confromBtn() {
        let params = {
          "obj": {
            "approvalComments": this.mark,
            id: this.objId
          }
        }
        postHandle(this.urls.confirmPost + this.id, params).then(res => {
          if (res._rd) {
            this.$message('处理成功');
            this.viewDialog = false
          }
        })
      },
      // 查看大图
      getSrcList(str) {
        let arr = []
        if (str) {
          arr = str.split(';')
        }
        return arr.map(item => imgPath(item))
      }


    }
  }
</script>

<style lang="less" scoped>
  /deep/ .el-step__head.is-process {
    color: #1890ff;
    border-color: #1890ff;
  }

  /deep/ .el-step__title.is-process {
    color: #1890ff;
  }

  /deep/ .el-step__description.is-process {
    color: #1890ff;
  }

  .img {
    width: 150px;
    height: 150px;
  }

  /deep/ .el-image {
    width: 150px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    font-size: 20px;
    background: #f6f6f6;
  }

  h4 {
    cursor: pointer;
    color: #1890ff;
  }

  .a {
    color: #969799
  }

  /* /deep/ .el-step__description.is-finish {
    .b {
      .el-radio__label {
        color: #1890ff
      }
    }
  } */

  .b {
    .el-radio {
      /deep/ .el-radio__label {
        color: #1890ff
      }
    }
  }


  .isShowLiucheng {
    cursor: pointer;
    color: #1890ff;
    display: inline-block;
    padding-bottom: 20px;
  }

  /deep/ .el-radio-group {
    width: 100%
  }
</style>